<template>
  <div class="topic container-fluid">
    <div class="row">
      <div class="title col-xs-12 text-center">
        <span class="title-text">{{topicGroup.title}}({{currentIndex+1}}/{{topicGroupListLength}})</span>
      </div>
      <div class="col-xs-12 body">
        <div class="row">
          <!-- 选项说明 -->
          <div class="col-xs-6 text-left my-line">
            <span class="often">常有</span>
          </div>
          <div class="col-xs-6 text-right my-line">
            <span class="no-often">不常有</span>
          </div>
          <!-- 选项说明 end-->
          <div v-for="(item,index) in topicGroup.topicGroup" :key="(index)" class="row my-line">
            <div class="col-xs-2" style="padding-left: 43px;">
              <input type="radio" :name="index" v-model="y" :value="item.y">
            </div>
            <div class="col-xs-8 text-center">
              <span class="topic-text">{{item.topic}}</span>
            </div>
            <div class="col-xs-2">
              <input type="radio" :name="index" v-model="n" :value="item.n">
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 text-center" style="padding-top: 16px;">
        <button
          @click="nextTopic()"
          type="button"
          class="btn btn-info btn-lg"
          style="background-color: #23b7b7;"
        >下一题</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "topic",
  data() {
    return {
      topicGroup: {},
      topicGroupList: [
        {
          title: "第一题",
          topicGroup: [
            { y: "V", n: "V", topic: "温和,厚道" },
            { y: "@", n: "N", topic: "有说服力" },
            { y: "#", n: "#", topic: "谦和" },
            { y: "N", n: "O", topic: "有主见,自创力的" }
          ]
        },
        {
          title: "第二题",
          topicGroup: [
            { y: "@", n: "@", topic: "会吸引人" },
            { y: "#", n: "#", topic: "可以与人合作" },
            { y: "O", n: "O", topic: "不屈服的" },
            { y: "N", n: "V", topic: "令人喜爱的" }
          ]
        },
        {
          title: "第三题",
          topicGroup: [
            { y: "N", n: "#", topic: "跟随者" },
            { y: "O", n: "O", topic: "勇敢的" },
            { y: "V", n: "N", topic: "忠诚" },
            { y: "@", n: "@", topic: "可爱" }
          ]
        },
        {
          title: "第四题",
          topicGroup: [
            { y: "#", n: "N", topic: "开放的" },
            { y: "V", n: "V", topic: "好施恩帮助" },
            { y: "N", n: "O", topic: "有毅力" },
            { y: "@", n: "@", topic: "开朗的" }
          ]
        },
        {
          title: "第五题",
          topicGroup: [
            { y: "N", n: "@", topic: "开心果" },
            { y: "#", n: "#", topic: "要求精细" },
            { y: "N", n: "O", topic: "厚脸皮,有勇气" },
            { y: "V", n: "V", topic: "镇定,冷静" }
          ]
        },
        {
          title: "第六题",
          topicGroup: [
            { y: "O", n: "O", topic: "好竞争的" },
            { y: "V", n: "V", topic: "善解人意" },
            { y: "N", n: "@", topic: "爱与人取乐" },
            { y: "Z", n: "#", topic: "和睦" }
          ]
        },
        {
          title: "第七题",
          topicGroup: [
            { y: "N", n: "#", topic: "挑剔" },
            { y: "V", n: "N", topic: "服从" },
            { y: "O", n: "O", topic: "坚持" },
            { y: "@", n: "@", topic: "活泼" }
          ]
        },
        {
          title: "第八题",
          topicGroup: [
            { y: "O", n: "N", topic: "勇敢" },
            { y: "@", n: "Z", topic: "会激励人" },
            { y: "N", n: "V", topic: "谦让" },
            { y: "Z", n: "#", topic: "害羞,沉静" }
          ]
        },
        {
          title: "第九题",
          topicGroup: [
            { y: "@", n: "@", topic: "好交际" },
            { y: "V", n: "V", topic: "有耐心,稳重" },
            { y: "O", n: "O", topic: "有自信" },
            { y: "#", n: "N", topic: "含蓄,保守" }
          ]
        },
        {
          title: "第十题",
          topicGroup: [
            { y: "O", n: "O", topic: "勇于冒险" },
            { y: "#", n: "N", topic: "善于接纳意见" },
            { y: "N", n: "@", topic: "热心" },
            { y: "V", n: "V", topic: "言行中庸,稳健" }
          ]
        },
        {
          title: "第十一题",
          topicGroup: [
            { y: "@", n: "@", topic: "健谈" },
            { y: "V", n: "V", topic: "能克制" },
            { y: "N", n: "#", topic: "一贯作风" },
            { y: "O", n: "O", topic: "武断" }
          ]
        },
        {
          title: "第十二题",
          topicGroup: [
            { y: "N", n: "@", topic: "圆滑发言" },
            { y: "O", n: "O", topic: "大胆" },
            { y: "#", n: "N", topic: "机智,老练" },
            { y: "V", n: "V", topic: "随和" }
          ]
        },
        {
          title: "第十三题",
          topicGroup: [
            { y: "O", n: "N", topic: "积极的挑战者" },
            { y: "@", n: "@", topic: "常受瞩目" },
            { y: "V", n: "V", topic: "随和" },
            { y: "N", n: "#", topic: "胆小" }
          ]
        },
        {
          title: "第十四题",
          topicGroup: [
            { y: "#", n: "#", topic: "极小心" },
            { y: "O", n: "N", topic: "坚定的" },
            { y: "@", n: "@", topic: "使人信服的" },
            { y: "V", n: "Z", topic: "态度从容" }
          ]
        },
        {
          title: "第十五题",
          topicGroup: [
            { y: "V", n: "N", topic: "共甘苦与乐" },
            { y: "N", n: "Z", topic: "热切的" },
            { y: "#", n: "#", topic: "乐于答允,支持" },
            { y: "Z", n: "O", topic: "精力充沛" }
          ]
        },
        {
          title: "第十六题",
          topicGroup: [
            { y: "@", n: "N", topic: "有信心" },
            { y: "N", n: "V", topic: "有同情心" },
            { y: "Z", n: "#", topic: "能忍耐" },
            { y: "O", n: "O", topic: "独断,有毅力" }
          ]
        },
        {
          title: "第十七题",
          topicGroup: [
            { y: "#", n: "N", topic: "有自律" },
            { y: "V", n: "V", topic: "大方,乐于分享" },
            { y: "N", n: "@", topic: "善用肢体语言" },
            { y: "O", n: "O", topic: "不轻易放弃" }
          ]
        },
        {
          title: "第十八题",
          topicGroup: [
            { y: "@", n: "N", topic: "勇于赞扬" },
            { y: "V", n: "Z", topic: "乐于助人" },
            { y: "N", n: "#", topic: "容易妥协" },
            { y: "O", n: "O", topic: "好强" }
          ]
        },
        {
          title: "第十九题",
          topicGroup: [
            { y: "#", n: "N", topic: "尊重,顺从" },
            { y: "O", n: "O", topic: "有企业精神" },
            { y: "@", n: "@", topic: "乐天派" },
            { y: "V", n: "V", topic: "亲切助人" }
          ]
        },
        {
          title: "第二十题",
          topicGroup: [
            { y: "O", n: "O", topic: "好争辩" },
            { y: "#", n: "N", topic: "可适应变" },
            { y: "N", n: "V", topic: "淡然,漠不关心" },
            { y: "@", n: "@", topic: "不杞人忧天" }
          ]
        },
        {
          title: "第二十一题",
          topicGroup: [
            { y: "V", n: "@", topic: "忠实可靠" },
            { y: "N", n: "V", topic: "安分,满足" },
            { y: "O", n: "O", topic: "积极" },
            { y: "#", n: "#", topic: "平淡恬静" }
          ]
        },
        {
          title: "第二十二题",
          topicGroup: [
            { y: "@", n: "@", topic: "喜欢交朋友" },
            { y: "N", n: "#", topic: "带书卷气息" },
            { y: "O", n: "O", topic: "有干劲活力" },
            { y: "V", n: "V", topic: "宽容的" }
          ]
        },
        {
          title: "第二十三题",
          topicGroup: [
            { y: "@", n: "@", topic: "平易近人" },
            { y: "#", n: "N", topic: "严谨" },
            { y: "O", n: "O", topic: "爽直" },
            { y: "N", n: "V", topic: "有保留" }
          ]
        },
        {
          title: "第二十四题",
          topicGroup: [
            { y: "O", n: "O", topic: "不休息,能量高" },
            { y: "V", n: "V", topic: "友善" },
            { y: "@", n: "@", topic: "受人拥戴" },
            { y: "#", n: "#", topic: "整洁,有纪律" }
          ]
        }
      ],
      topicGroupListLength: 0,
      currentIndex: 0,
      y: "",
      n: "",

      a: 0, //O(常有)
      b: 0, //@(常有)
      c: 0, //V(常有)
      d: 0, //#(常有)

      aa: 0, //O(不常有)
      bb: 0, //@(不常有)
      cc: 0, //V(不常有)
      dd: 0 //#(不常有)
    };
  },
  created() {
    this.config();
  },
  computed: {},
  methods: {
    config() {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", function() {
        history.pushState(null, null, document.URL);
      });
      this.topicGroupListLength = this.topicGroupList.length;
      this.topicGroup = this.topicGroupList[0];
      alert(
        "请选择一个‘常有’和一个‘不常有’。但是同一项不能同时选中‘常有’和‘不常有’。"
      );
    },
    nextTopic() {
      let radioLength = $("input[type='radio']:checked").length;
      if (radioLength != 2) {
        alert('请选择一个"常有"和一个"不常有"');
        return;
      }
      if ("O" == this.y) {
        this.a++;
      }
      if ("@" == this.y) {
        this.b++;
      }
      if ("V" == this.y) {
        this.c++;
      }
      if ("#" == this.y) {
        this.d++;
      }

      if ("O" == this.n) {
        this.aa++;
      }
      if ("@" == this.n) {
        this.bb++;
      }
      if ("V" == this.n) {
        this.cc++;
      }
      if ("#" == this.n) {
        this.dd++;
      }
      console.log("yO:" + this.a);
      console.log("y@:" + this.b);
      console.log("yV:" + this.c);
      console.log("y#:" + this.d);
      console.log("nO:" + this.aa);
      console.log("n@:" + this.bb);
      console.log("nV:" + this.cc);
      console.log("n#:" + this.dd);
      this.y = "";
      this.n = "";
      let index = ++this.currentIndex;
      if (index > this.topicGroupList.length - 1) {
        this.currentIndex = this.topicGroupList.length - 1;
        this.result();
        return;
      }
      this.topicGroup = this.topicGroupList[index];
    },
    result() {
      let params = new URLSearchParams();
      params.append(
        "userUUID",
        JSON.parse(sessionStorage.getItem("userInfo")).userUUID
      );
      params.append("a", this.a);
      params.append("b", this.b);
      params.append("c", this.c);
      params.append("d", this.d);
      params.append("aa", this.aa);
      params.append("bb", this.bb);
      params.append("cc", this.cc);
      params.append("dd", this.dd);
      this.$axios
        .post("/results/add.wy", params)
        .then(res => {
          console.log(res);
          this.$router.push({
            path: "/result"
          });
        })
        .catch(err => {
          Message.error("未知错误");
        });
    }
  }
};
</script>

<style scope>
.title {
  padding-top: 35%;
}
.title-text {
  font-size: 28px;
  color: #23b7b7;
  font-weight: 600;
}
.body .my-line {
  padding-top: 6%;
}
.body .often {
  font-size: 18px;
  color: #2199da;
  font-weight: 600;
  padding-left: 20px;
}
.body .no-often {
  font-size: 18px;
  color: #e95454;
  font-weight: 600;
  padding-right: 20px;
}
.body .topic-text {
  font-size: 20px;
}
</style>
